import React, { Component } from 'react'
import { Link,Switch,Route } from 'react-router-dom';
import Detail from './Detail';
export default class Message extends Component {
    state={
        msObj:[
            {
                id:'01',
                title:'message001',
                content:'no1'
            },
            {
                id:'02',
                title:'message002',
                content:'no2'
            },
            {
                id:'03',
                title:'message003',
                content:'no4'
            },
        ]
    }
    render() {
        const { msObj } = this.state
        return (
        <div>
            <ul>
                {
                   msObj.map((i) => { 
                        let tem = JSON.stringify(i)
                        return(
                            <li key={i.id}>
                                {/* 传递params参数 */}
                                <Link to={`/home/message/detail/${i.id}`}>{i.title}</Link>


                                {/* 传递search参数 */}
                                {/* <Link to={`/home/message/detail?detail=${tem}`}>{i.title}</Link> */}

                                {/* 传递state参数 注:参数不会显示在地址栏中 此 state 和 class(类)中的state没有任何的关系 */}
                                {/* <Link to={{pathname:'/home/message/detail',state:i}}>{i.title}</Link> */}

                            </li>
                        )
                    }) 
                }
            </ul>
            <Switch>
                {/* 声明 接受 params 参数 */}
                <Route path='/home/message/detail/:id' component={Detail}></Route>
                {/* search 和 state 参数不需要任何修改 */}
                {/* <Route path='/home/message/detail' component={Detail}></Route> */}
            </Switch>
        </div>
        )
    }
}
